<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>日报管理</title>
    <link rel="stylesheet" href="../css/style.css" type="text/css">
    <style type="text/css">
        body {
            background: none;
        }
    </style>
</head>
<body>
<div class="container list">
    <p class="text-center top-title">研发部日志</p>
    <div>
        <table cellpadding="0" cellspacing="0">
            <thead>
            <tr class="text-center">
                <th>项目名称</th>
                <th colspan="2">工作内容</th>
                <th>备注</th>
            </tr>
            </thead>
            <tbody>
            <template v-for="(proj, index) in projects">
                <tr class="project">
                    <td class="width-200">
                        <select>
                            <option value="">请选择项目</option>
                            <option value="proj.projectName" selected="proj.projectName">易兑外币交易系统</option>
                        </select>
                    </td>

                    <td colspan="2" class="width-400">
                        <div class="show-content">
                            <span v-model="proj.content">{{proj.content}}</span>
                        </div>
                    <td>
                        <div class="show-mark">
                            <span v-model="proj.mark">{{proj.mark}}</span>
                        </div>
                    </td>
                </tr>
            </template>

            <tr class="text-center manager">
                <td class="bold">主管意见</td>
                <td colspan="3"><input type="text"/></td>
            </tr>
            <tr class="text-center">
                <td class="bold">记录人</td>
                <td class="person"><input type="text" value="宋昱承"/></td>
                <td class="bold" style="width:150px;">记录时间</td>
                <td class="date">
                    <div>
                        <input class="laydate-icon" v-model="startDate"
                               onclick="laydate({istime: true, format: 'YYYY-MM-DD hh:mm'})" placeholder="请输入开始时间"/>
                    </div>
                    <div>
                        <input class="laydate-icon" v-model="endDate"
                               onclick="laydate({istime: true, format: 'YYYY-MM-DD hh:mm'})" placeholder="请输入结束时间"/>
                    </div>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
    <div class="divider"></div>
</div>

<div class="container list"><p class="text-center">研发部日志</p>
    <div>
        <table>
            <thead>
            <tr class="text-center">
                <th>项目名称</th>
                <th colspan="2">工作内容</th>
                <th>备注</th>
            </tr>
            </thead>
            <tbody>
            <tr class="project">
                <td class="width-200"><select>
                    <option value="">请选择项目</option>
                    <option value="proj.projectName" selected="selected">易兑外币交易系统</option>
                </select></td>
                <td colspan="2" class="width-400">
                    <div class="show-content"><span>1848 线上申请旅支卡，在最后提交申请时没有反应 原因是因为实名认证的用户不需要上传证件照导致的 js 获取dom失败！1848 线上申请旅支卡，在最后提交申请时没有反应 原因是因为实名认证的用户不需要上传证件照导致的 js 获取dom失败1848 线上申请旅支卡，在最后提交申请时没有反应 原因是因为实名认证的用户不需要上传证件照导致的 js 获取dom失败1848 线上申请旅支卡，在最后提交申请时没有反应 原因是因为实名认证的用户不需要上传证件照导致的 js 获取dom失败1848 线上申请旅支卡，在最后提交申请时没有反应 原因是因为实名认证的用户不需要上传证件照导致的 js 获取dom失败</span>
                    </div>
                </td>
                <td>
                    <div class="show-mark"><span></span></div>
                </td>
            </tr>
            <tr class="text-center manager">
                <td class="bold">主管意见</td>
                <td colspan="3"><input type="text"></td>
            </tr>
            <tr class="text-center">
                <td class="bold">记录人</td>
                <td class="person"><input type="text" value="宋昱承"></td>
                <td class="bold" style="width: 150px;">记录时间</td>
                <td class="date">
                    <div><input onclick="laydate({istime: true, format: 'YYYY-MM-DD hh:mm'})" placeholder="请输入开始时间"
                                class="laydate-icon"></div>
                    <div><input onclick="laydate({istime: true, format: 'YYYY-MM-DD hh:mm'})" placeholder="请输入结束时间"
                                class="laydate-icon"></div>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</div>


<script src="../js/vue.min.js"></script>
<script src="../js/laydate/laydate.js"></script>
<script type="text/javascript">
    new Vue({
        el: '.container',
        data: {
            countSize: 1024,
            projectNums: 0,
            userName: '宋昱承',
            startDate: '2016-10-28 09:00',
            endDate: '2016-10-28 17:00',
            projects: [
                {
                    id: '1',
                    content: '1848 线上申请旅支卡，在最后提交申请时没有反应 原因是因为实名认申请旅支卡，在最后提交申请时没有反应 原因是因为实名认证的用户不需要上传证件照导致的 js 获取dom失败！1848 线上申请申请旅支卡，在最后提交申请时没有反应 原因是因为实名认证的用户不需要上传证件照导致的 js 获取dom失败！1848 线上申请证的用户不需要上传证件照导致的 js 获取dom失败！1848 线上申请旅支卡，在最后提交申请时没有反应 原因是因为实名认证的用户不需要上传证件照导致的 js 获取dom失败1848 线上申请旅支卡，在最后提交申请时没有反应 原因是因为实名认证的用户不需要上传证件照导致的 js 获取dom失败1848 线上申请旅支卡，在最后提交申请时没有反应 原因是因为实名认证的用户不需要上传证件照导致的 js 获取dom失败1848 线上申请旅支卡，在最后提交申请时没有反应 原因是因为实名认证的用户不需要上传证件照导致的 js 获取dom失败',
                    mark: '',
                    projectName: ''
                }


            ]

        },
        computed: {
            contentWords: function () {
                return this.content.length
            },
            markWords: function () {
                return this.mark.length
            }
        },
        methods: {
            handleDate: function () {
                this.startDate = new Date().getFullYear() + '-' + (new Date().getMonth() < 10 ? '0' : new Date().getMonth()) + new Date().getMonth() + '-' + new Date().getDate() + ' 09:00';
                this.endDate = new Date().getFullYear() + '-' + (new Date().getMonth() < 10 ? '0' : new Date().getMonth()) + new Date().getMonth() + '-' + new Date().getDate() + ' 17:30';
            }
        }
    })
</script>
</body>
</html>